<!-- 自制 首页导航卡片 -->
<template>
	<view class="index_card" @click="goMethod">
		<view class="title_con">
			<text class="big_title">
				<slot  name = 'title'></slot>
			</text>
			<text class="small_title">
				<slot  name = 'tip'></slot>
			</text>
		</view>
		<image class="img_index" :src="props.back_url" mode="widthFix"></image>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps(["navigateUrl","fontColor","back_url","backColor"])
	let back_url = `url("${props.back_url}")` 
	const goMethod = () => {
		console.log('我去了这里',props.navigateUrl);
		uni.navigateTo({
			url:props.navigateUrl,
		})
	}
</script>

<style>
.index_card{
	flex-shrink: 0 ;
	/* background-image: v-bind(back_url); */
	/* background-size: 23vw 40vh; */
	/* background-repeat: no-repeat; */
	width: 23vw;
	height: 40vh;
	margin-right: 1vw;
	box-sizing: border-box;
	border-radius: 10% 0 10% 0;
	background-color: v-bind(props.backColor)  ;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.title_con{
	display: flex;
	width: 90%;
	flex-direction: column;
	margin: 5vh 0 5vh 3vw;
}
.big_title{
	font-size: 2rem;
	font-weight: bold;
}
.small_title{
	font-weight: bold;
	color: v-bind(props.fontColor);
}
.img_index{
	width: 10vw;
	margin-right: 3vw;
}
</style>